<script lang="ts" setup>
import { ref } from "vue";
import { ElLoading } from "element-plus";
import {
  getCourseListByDirectionId,
  selectBySchoolId,
  selectP,
  getCourseList,
} from "@/api/courseList.js";
import { Plus } from "@element-plus/icons-vue";
import { dataType } from "element-plus/es/components/table-v2/src/common";
import router from "@/router";
//方向模型
const fxData = ref([]);


const listCourstDate = ref([]);
const gotok = async () => {
  let coursts = await getCourseList();
  if (coursts.data.length == 0) {
    listCourstDate.value = null;
    return;
  }
  listCourstDate.value = coursts.data;
};
gotok();
const fx = async () => {
  let a = await selectBySchoolId();
  fxData.value = a.data;
};
fx();
//类型模型
const lxData = ref([]);
const lx = async () => {
  let a = await selectP();
  lxData.value = a.data;
};
lx();
//数据模型
const listDate = ref([]);
//条件模型
const tjModel = ref({
  directionId: "",
  courseName: "",
  professionalId: "",
});
const loading = ref(false);
function showLoader() {
  loading.value = true; //开启加载
}
function closeLoader() {
  loading.value = false; //关闭加载
}
const cha = async () => {
  let params = {
    directionId: tjModel.value.directionId ? tjModel.value.directionId : null,
    professionalId: tjModel.value.professionalId
      ? tjModel.value.professionalId
      : null,
    courseName: tjModel.value.courseName ? tjModel.value.courseName : null,
  };
  showLoader();
  let a = await getCourseListByDirectionId(params);
  //接受异常信息
  listDate.value = a.data;
  closeLoader();
};
cha();
const dj = (index) => {
  tjModel.value.directionId = index
  cha()
}
const dj1 = (num) => {
  tjModel.value.professionalId = num
  cha()
}
//点击全部方向
const dj2 = () => {
  tjModel.value.directionId = null
  cha()
}
//点击全部类别
const dj3 = () => {
  tjModel.value.professionalId = null
  cha()
}

//输入的是中文或是英文
const isComposing = ref(false)
//监听变化  并且调用
const onSearchInput = () => {
  if (!isComposing.value) {
    cha();
  }
}

const compositionStart = () => {
  // 中文输入开始，设置 isComposing 为 true  
  isComposing.value = true;
};
const compositionEnd = () => {
  // 中文输入结束，设置 isComposing 为 false 并调用 cha()  
  isComposing.value = false;
  cha();
};


//控制方向样式
const fxNum = ref(-1);
//控制类型
const lxNum = ref(-1);
</script>
<template>

  <div class="subject-right">
    <div class="subject-right-header">
      <div class="resourceTop">
       <div class="header_info">
         <div class="logo">
          <img src="@/assets/img/kechengziyuan.png" alt="">
        </div>
        <div class="text">
          <p class="title-01">课程资源</p>
          <p>
            <span v-if="listCourstDate == null"> 找不到课程？查看平台&nbsp;<a href="">所有课程</a></span>
            <span v-else>共&nbsp;{{ listCourstDate.length }}&nbsp;门课程</span>
          </p>
        </div>
       </div>
        <div class="search">
          <input type="text"
           id="search" placeholder="搜索想要查找的内容" @input="onSearchInput"
            @compositionstart="compositionStart" @compositionend="compositionEnd" v-model="tjModel.courseName" />
        </div>
      </div>
    </div>
    <div class="subject-right-body" v-loading="loading">
      <div class="body-header">
        <ul>
          <li :class="{ 'header-01': fxNum == -1 }" @click="
            fxNum = -1;
          dj2();
          ">
            全部方向
          </li>
          <li v-for="(item, index) in fxData" :key="index" :class="{ 'header-01': fxNum == index }" @click="
            fxNum = index;
          dj(item.directionId);
          ">
            {{ item.directionName }}
          </li>
        </ul>
      </div>
      <div class="body-header">
        <ul>
          <li :class="{ 'header-01': lxNum == -1 }" @click="
            lxNum = -1;
          dj3();
          ">
            全部类型
          </li>
          <li v-for="(item, index) in lxData" :key="index" :class="{ 'header-01': lxNum == index }" @click="
            lxNum = index;
          dj1(item.professionalId);
          ">
            {{ item.professionalName }}
          </li>
        </ul>
      </div>

      <div v-if="listDate == null" class="body-002">
        <img src="https://www.xiaoqiqiao.com/new_yun/images/common/no_data.png" alt="" />
        <p>暂无课程</p>
      </div>
      <div v-else class="body-001" v-for="item in listDate" :key="item">
        <div class="b-header">
          <p>{{ item.direction.directionName }}</p>
        </div>
        <div class="b-body-zong">
          <div class="b-body" v-for="item in item.list" :key="item"
            @click="router.push('/course/courseDetail?courseId=' + item.courseId)">
            <div class="b-body-left">
              <div class="left-header">
                <!-- <img src="../../../assets/web/kclg.jpg" /> -->
                <img :src="item.image"/>
                <!-- <p>官方</p> -->
              </div>
             
            </div>
            <div class="b-body-count">
              <div class="count-header">
                <span>{{ item.courseName }}</span>
                <div class="header-x">{{ item.lessonHours }}课时</div>
              </div>
              <div class="count-button">
                <div style="display: flex">
                  <div class="style-list" v-for="item in item.directionName" :key="item">
                    {{ item }}
                  </div>
                </div>
                <div style="margin-top: 8px">
                  <span class="style-list">{{ item.professionalName }}</span>
                </div>
              </div>
            </div>
            <div class="b-body-right">
              <div class="right-header">
                <el-progress :percentage="item.courseStatus" color="red" />
              </div>
              <div class="right-button">
                进入学习<span class="iconfont">&#xe62b;</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
@import url(@/assets/font/iconfont.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body-002 {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.body-002 p {
  color: black;
  font-family: STHeitiSC-Medium, STHeitiSC;
  margin-top: 24px;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.resourceTop {
  width: 100%;
  height: 100px;
  background-color: white;
  display: flex;
  align-items: center;
  border: 1px solid #f0f0f0;
  justify-content: space-between;
}

.resourceTop .logo {
  width: 60px;
  height: 60px;
  background-color: #ff6b0f;
  border-radius: 50%;
  margin-left: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resourceTop .logo img {
  width: 60px;
  height: 60px;
  padding: 18px;
}
.header_info{
  display: flex;
  align-items: center;
}

.text {
  width: 350px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
}

.text .title-01 {
  font-size: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;
}

 .text p span {
  color: rgba(0, 0, 0, 0.45);
}

.resourceTop .text p a {
  color: #f4523b;
}

.resourceTop .search {
  margin-right: 20px;
  display: flex;
  border-radius: 2px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
}


.resourceTop .search .sousuo {
  width: 40px;
  height: 40px;
  padding-left: 5px;
  padding-top: 5px;
  background-color: #fff;
  line-height: 40px;
  color: #a29494;
  text-align: center;
  font-size: 16px;
}

.resourceTop .search .sousuo img {
  width: 80%;
}

.resourceTop .search input {
  width: 320px;
  height: 40px;
  border: none;
  background-color: #fff;
  background-image: url('@/assets/img/search.png'); /* 背景图路径 */
  background-size: 16px 16px; /* 调整背景图大小 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: 10px center; /* 设置背景图位置 */
  padding-left: 30px; /* 确保文本不被背景图遮挡 */
  box-sizing: border-box; /* 确保 padding 和 border 不会影响宽度 */
}

.resourceTop .search input:focus {
  outline: none;
}

.resourceTop .search:hover .sousuo {
  border: 1px solid red;
  border-right: none;
}

.resourceTop .search:hover input {
  border: 1px solid red;

}

.subject-right {
    width: 100%;
  background-color: white;
  overflow: hidden;
}

.subject-right-header {
  width: 100%;
  height: 100px;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #f0f0f0;
}

.subject-right-body {
  width: 100%;
  min-height: 78.5vh;
  height: 100%;
  background-color: white;
}

.body-header {
  display: flex;
  margin-top: 30px;
  margin-left: 60px;
  text-align: center;
}

.body-header ul {
  height: 37px;
  display: flex;
  list-style: none;
  text-align: center;
  line-height: 37px;
  float: left;
  font-size: 16px;
}

.body-header ul li {
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 20px;

  cursor: pointer;
}

.body-header ul li:hover {
  background-color: #f5f5f5;
}

.header-01 {
  height: 37px;
  line-height: 37px;
  list-style: none;
  color: #f46250;
  background-color: #ffe8e0;
}

.header-01:hover {
  color: #d04b3f;
}

.body-001 {
  margin-left: 60px;
  margin-top: 40px;
}

.b-header {
  height: 18px;
  color: rgba(0, 0, 0, 0.65);
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-size: 16px;
  font-weight: 600;
  border-left: 3px solid red;
  line-height: 18px;
  padding-left: 10px;
}

.b-body {
  height: 200px;
  margin-top: 30px;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin: 24px 0 0;
  width: 755px;
  padding: 16px 16px 16px 0px;
}

.b-body-zong {
  width: 1550px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  cursor: pointer;
}

.b-body:hover {
  border: 1px solid red;
}

.b-body:hover .left-header {
  opacity: 1;
}

.b-body:hover .left-header p {
  background-color: red;
  color: #fde7c6;
  transform: translate(-50%);
  margin-left: 23px;
}

.b-body:hover .count-header {
  color: red;
}

.b-body:hover .header-x {
  background-color: #feedeb;
  color: red;
}

.b-body:hover .right-button {
  background-color: #f4523b;
  color: white;
}

.b-body-left {
  width: 220px;
  height: 150px;
  display: flex;
  flex-direction: column;
}

.left-header {
  margin: 0 auto;
  height: 150px;
  width: 220px;

}

.left-header img {
  
  margin-left: 20px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.left-header p {
  align-items: center;
  background: #a29494;
  border-radius: 0 0 100px 100px;
  bottom: 0;
  color: #fff;
  display: flex;
  font-family: STHeitiSC-Light, STHeitiSC;
  font-size: 12px;
  height: 40%;
  justify-content: center;
  margin-top: -24px;
  width: 94%;
}


.b-body-count {
  width: 489px;
  height: 91px;
  margin-left: 40px;
  font-size: 18px;
}

.count-header {
  display: flex;
  height: 21px;
  width: 339px;
}

.header-x {
  height: 18px;
  line-height: 20px;
  color: black;
  background-color: #f2f2f2;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 5px;
  font-size: 10px;
}

.count-button {
  height: 50px;
  margin-top: 16px;
}

.style-list {
  height: 18px;
  color: #acb1b0;
  font-size: 12px;
  line-height: 18px;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 5px;
}

.b-body-right {
  width: 120px;
  height: 90px;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.right-header {
  width: 120px;
  height: 21px;

}

.right-button {
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  text-align: center;
  line-height: 32px;
  padding: 0 15px;
}
</style>
